<template>

    <el-card style="margin: 10px 0px;">
        <el-button type="primary" size="default" @click="addActCode">添加10个申请码</el-button>
        <!-- table展示用户信息 -->
        <el-table @selection-change="selectChange" style="margin: 10px 0px;" border :data="actCodeArr">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column label="#" align="center" type="index"></el-table-column>
            <el-table-column label="注册码" align="center" prop="code" show-overflow-tooltip></el-table-column>
            <el-table-column label="有效使用次数" align="center" prop="effectTimes" show-overflow-tooltip></el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[5, 7, 9, 11]"
                       :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="items"
                       @current-change="getHasActCode"
                       @size-change="handler"/>
    </el-card>

</template>
<script setup lang="ts">
    import useLayOutSettingStore from '@/store/modules/setting'
    import {onMounted, ref} from 'vue';
    import {reqActCodeList, reqAddActCode} from "@/api/sys/actCode";
    import {actCodeInfo, ActCodeListReponseData, ActCodeReponseData} from "@/api/sys/actCode/type";
    import {HandleResponseData} from "@/api/common/type";
    import {ElMessage} from "element-plus";
    //默认页码
    let page = ref<number>(0);
    //一页展示几条数据
    let pageSize = ref<number>(5);
    //总个数
    let items = ref<number>(0);
    //存储全部用户的数组
    let actCodeArr = ref<ActCodeReponseData>([]);


    const value = ref(0)
    //准备一个数组存储批量删除的用户的ID
    let actCodeInfo = ref<actCodeInfo>({});
    //定义响应式数据:收集用户输入进来的关键字
    //获取模板setting仓库
    let settingStore = useLayOutSettingStore();
    //组件挂载完毕
    onMounted(() => {
        getHasActCode();
    });
    //获取全部已有的用户信息
    const getHasActCode = async (pager = 1) => {
        //收集当前页码
        page.value = pager;
        let result: ActCodeListReponseData = await reqActCodeList(page.value-1, pageSize.value);
        if (result.code == '200') {
            items.value = result.result.items;
            actCodeArr.value = result.result.data;
        }
    }
    //分页器下拉菜单的自定义事件的回调
    const handler = () => {
        getHasActCode();
    }

    const addActCode = async () => {
        let result: HandleResponseData = await reqAddActCode()
        if (result.code == '200'){
            ElMessage({ type: 'success', message: '添加成功' });
        }else {
            ElMessage({ type: 'danger', message: '添加失败'+result.msg });

        }
        await getHasActCode();
    }



</script>

<style scoped>
    .form {
        justify-content: space-between;
        align-items: center;
    }
</style>
